﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Jquery Widgets</title>
    <link href="../../js/jqx/styles/jqx.base.css" rel="stylesheet" type="text/css" />    
    <!-- jq-->
    <script src="../../js/jq/jquery.lastest.js" type="text/javascript"></script>
    <!-- jqwidgets-->
    <script src="../../js/jqx/jqx-all.js" type="text/javascript"></script>
    <!-- custom js-->
    <script src="../../js/core/rms.core.js" type="text/javascript"></script>
    <script src="../../js/core/rms.basecontrol.js" type="text/javascript"></script>    
    <script src="../../js/core/rms.control.js" type="text/javascript"></script>
    <style>
        div.row{
           display: block;
           margin: 3px 2px;            
        }
    </style>
    <script type="text/javascript">
        $(function () {
            var input = new RMS.CControl({ controlType: '1', id: 'input' }),
                datetime = new RMS.CControl({ controlType: '11', id: 'datetime' }),
                time = new RMS.CControl({ controlType: '12', id: 'time' }),
                calendar = new RMS.CControl({ controlType: '13', id: 'calendar' });

            console.log('::input', input.getSettings());
            console.log('::datetime', datetime.getSettings());
            console.log('::time', time.getSettings());
            console.log('::calendar', calendar.getSettings());
        });
    </script>
</head>
<body>
    <div class="row">Input</div>
    <div class="row">
        <input type="text" id="input" style="width:200px;height:24px;" />           
    </div>
    <div class="row">
        <div id='datetime'></div>
    </div>
    <div class="row">
        <div id='time'></div>
    </div>
    <div class="row">
        <div id='calendar' style="width: 220px; height: 220px"></div>
    </div>
</body>
</html>
